<template>
  <div class="comment-page">
    <div class="page-header">
      <button @click="goBack" class="back-btn">
        <i class="fa fa-arrow-left"></i>
        返回
      </button>
      <h2>商品评价</h2>
    </div>

    <div class="comment-container">
      <!-- 订单信息展示 -->
      <div v-if="orderDetail" class="order-info-card">
        <div class="card-header">
          <h3>订单信息</h3>
        </div>
        <div class="card-content">
          <div class="info-row">
            <span class="label">订单号：</span>
            <span class="value">{{ orderDetail.order_no }}</span>
          </div>
          <div class="info-row">
            <span class="label">下单时间：</span>
            <span class="value">{{ formatDate(orderDetail.create_time) }}</span>
          </div>
        </div>
      </div>

      <!-- 发表评论区域 -->
      <CreateComment
        v-if="canComment && goodsId > 0"
        :goods-id="goodsId"
        :order-id="orderId"
        @success="handleCommentSuccess"
        class="create-comment-section"
      />

      <!-- 评论列表区域 -->
      <div v-if="goodsId > 0" class="comment-list-section">
        <h3>全部评价</h3>
        <CommentList :goods-id="goodsId" ref="commentListRef" />
      </div>

      <!-- 加载中状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <p>加载订单信息中...</p>
      </div>

      <!-- 提示信息 -->
      <div v-if="!canComment" class="info-card">
        <i class="fa fa-info-circle"></i>
        <p>只有已完成订单的商品才能发表评价</p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import CreateComment from '@/components/comments/CreateComment.vue'
import CommentList from '@/components/comments/CommentList.vue'
import { ordersApi, type OrderDetail } from '@/api/orders'

const route = useRoute()
const router = useRouter()
const commentListRef = ref<InstanceType<typeof CommentList>>()

const goodsId = ref(0)
const orderId = ref(0)
const canComment = ref(false)
const orderDetail = ref<OrderDetail | null>(null)
const loading = ref(false)

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  })
}

// 从路由参数获取商品ID和订单ID
onMounted(async () => {
  goodsId.value = Number(route.params.goodsId)
  orderId.value = Number(route.query.orderId)
  canComment.value = route.query.canComment === 'true'

  // 如果有订单ID但没有商品ID，则加载订单详情获取商品信息
  if (orderId.value && goodsId.value === 0) {
    await loadOrderDetail()
  }
})

const loadOrderDetail = async () => {
  try {
    loading.value = true
    const detail = await ordersApi.getOrderDetail(orderId.value)
    orderDetail.value = detail
    // 如果有商品，设置第一个商品的ID
    if (detail.items && detail.items.length > 0) {
      goodsId.value = detail.items[0].goods
    }
  } catch (error) {
    console.error('加载订单详情失败:', error)
  } finally {
    loading.value = false
  }
}

const handleCommentSuccess = () => {
  // 刷新评论列表
  commentListRef.value?.loadComments()
}

const goBack = () => {
  router.back()
}
</script>

<style scoped lang="scss">
.comment-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;

  .page-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    .back-btn {
      padding: 8px 16px;
      background: #f5f5f5;
      color: #666;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background-color 0.2s;

      &:hover {
        background: #e6e6e6;
      }
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #333;
    }
  }

  .comment-container {
    .create-comment-section {
      margin-bottom: 24px;
    }

    .comment-list-section {
      h3 {
        margin: 0 0 16px 0;
        font-size: 18px;
        color: #333;
        padding-bottom: 12px;
        border-bottom: 1px solid #eee;
      }
    }

    .info-card {
      background: #e6f7ff;
      border: 1px solid #91d5ff;
      border-radius: 8px;
      padding: 20px;
      text-align: center;
      margin-bottom: 24px;

      i {
        color: #1890ff;
        font-size: 24px;
        margin-bottom: 12px;
        display: block;
      }

      p {
        margin: 0;
        color: #666;
        font-size: 16px;
      }
    }
  }
}

@media (max-width: 768px) {
  .comment-page {
    padding: 10px;

    .page-header {
      padding: 16px;
      flex-direction: column;
      gap: 12px;
      text-align: center;

      .back-btn {
        align-self: flex-start;
      }
    }
  }
}
</style>
